<template>
  <el-dialog title="用户信息" :visible.sync="detailOpen" width="50%" append-to-body>
    <el-form ref="form" :model="detail" label-width="120px">
      <h3>基本信息</h3>
      <el-row :gutter="24">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="用户ID: ">
              {{ detail.id }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="用户编号: ">
              {{ detail.userNo }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="头像: ">
              <image-preview class="detail-img" :src="detail.avatar"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="邮箱: ">
              {{ detail.email }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="昵称: ">
              {{ detail.nickname }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="姓氏: ">
              {{ detail.lastName }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="名字: ">
              {{ detail.firstName }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="性别: ">
              <dict-tag :options="dict.type.sys_user_sex" :value="detail.sex"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="邀请码: ">
              {{ detail.inviteCode }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="推荐用户数量: ">
              {{detail.recommendCount }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="有效用户数量: ">
              {{detail.effectiveCount }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="用户类型: ">
              <el-tag type="primary" v-if="detail.isVip === '1'">会员用户</el-tag>
              <el-tag type="info" v-else>普通用户</el-tag>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple" v-if="detail.isVip === '1'">
            <el-form-item label="成为会员途径: ">
              <dict-tag :options="dict.type.become_vip_way" :value="detail.becomeVipWay"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="账户状态: ">
              <dict-tag :options="dict.type.member_account_status" :value="detail.status"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="注册时间: ">
              {{ parseTime(detail.createTime) }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="kyc状态: ">
              <dict-tag :options="dict.type.account_kyc_status" :value="detail.interlaceAccountKycStatus"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <h3>钱包信息（总计：{{ (Number(detail.cryptoSum) + Number(detail.fiatSum)).toFixed(6) }}）</h3>
      <el-row :gutter="24">
        <template v-if="detail.balances" v-for="(item, index) in detail.balances ">
          <el-row :gutter="24" >
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="币种: ">
                  {{ item.currency }}
                </el-form-item>
              </div>
            </el-col>
            <el-col v-if="item.walletType != 'Budget'" :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="余额: ">
                  {{ item.virtualAvailable }}
                </el-form-item>
              </div>
            </el-col>
            <el-col v-else :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="余额: ">
                  {{ item.available }}
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="detailOpen = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getDetail } from '@/api/triones/interlaceMember'
export default {
  name: "memberDetail",
  dicts: ['sys_user_sex','member_account_status','become_vip_way','account_kyc_status'],
  data() {
    return {
      detailOpen: false,
      detail: {},
      totalAmount: 0,
    };
  },
  methods: {
    show(id) {
      this.handleInfo(id);
      this.detailOpen = true;
    },
    /** 用户详情 */
    handleInfo(id) {
      getDetail(id).then(response => {
        this.detail = response.data;
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
